<template>
  <div class="public_content study_content bg-color-gray9">
		<!-- 党员风采 -->
		<div class="public_content_right_l pull-left over-h study_topic">
			<div class="public_card">
				<div class="public_card_title bg-img-card fcolor-white">
					<span class="fsize-18 pl-15">党员风采</span>
				</div>
				<div class="study_topic_content mt-15">
					<!--标题开始-->
					<h2 class="center-text hr-sb-gray2 pb-15 fcolor-11 fsize-28" v-html="detailData.title"></h2>
					<!--标题结束-->
					<div class="w-all mt-10 over-h">
						<span class="fl w-50b center-text fsize-14 fcolor-99">发布人：{{detailData.createName}}</span>
						<span class="fr w-50b center-text fsize-14 fcolor-99">发表时间：{{detailData.createName}}</span>
					</div>
					<div class="fsize-14 ti-2 fcolor-11 lh-24 font-bold mt-20">
						<div class="show_text">
							<p class="text-l" v-html="detailData.content"></p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--新闻快讯-->
		<div class="threeitems public_content_right_r pull-right w-320 over-h">
			<div class="public_card_title bg-img-card fcolor-white">
				<span class="fsize-16 pl-15">新闻快讯</span>
			</div>
			<ul class="public_card_content over-h mt-10" v-if="newsList.length > 0">
				<li class="mt-10 text-l" v-for="(item,index) in newsList">
					<router-link :to="{path: `/news-detail/${item.id}`}" class="see-details">
						<span v-html="item.title"></span>  
					</router-link>
				</li>	
			</ul>	
		</div>		
	</div>
</template>

<script>
	import '@/assets/css/common.css';
	export default {
		data() {
			return {
				id:'',
				detailData:{},
				newsList:[],
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			init(){
				this.$parent.$data.current = 5;
				this.id = this.$route.params.id;
				this.getNewsDetail(this.id);
				this.getNewsList();
			},
			getNewsDetail(id){  
				this.$axios.get(`web/article/getArticleById`,{'articleId':id}).then(res => {
					if(res.data && res.data.code === 0){
						this.detailData = res.data.data
					}else {
						this.$message.error(res.data.msg)
					}		
				})
			},
			//获取右侧新闻
			getNewsList(){
				this.$axios.get(`web/article/articleList`).then(res => {
					if(res.data && res.data.code === 0){
						res.data.data.map((item)=>{
							if(item.id == '053551262afe4085b04c2f8d9ce06d60'){
								this.newsList = item.articleEntity.slice(0,10)  
							}
						})
					}else {
						this.$message.error(res.data.msg)
					}
				})
			}
		}	
	}
</script>

<style scoped>
	.study_topic_content{
		width:820px;
	}
	.show_text p{
		margin-bottom: 10px;
		font-size: 16px;
		/* text-indent: 2em; */
		text-align: left;
	}
/* 新闻快讯 */
ul.public_card_content, ol.public_card_content{
    padding-left: 22px;
}
ol.public_card_content > li{
    display: list-item;
    list-style: decimal;
    width: 100%;
    vertical-align: top;
}
ul.public_card_content, ul.public_card_content > li{
    list-style: disc;
    color: #d9d9d9;
}
.public_card_content > li{
    font-size: 14px;
}
.public_card_content a{
    color: #333;
    display: inline-block;
    width: 100%;
    vertical-align: top;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}
.public_card_content li{
    counter-increment: chapter;
}
.public_card_content a:before{
}
.public_card_content li:hover > a{
    color: #ff3032;
}
.threeitems .public_card_content li:first-child, .threeitems .public_card_content li:nth-of-type(2),
.threeitems .public_card_content li:nth-of-type(3){
    list-style: none;
    position: relative;
}
.threeitems .public_card_content li:first-child a:before,
.threeitems .public_card_content li:nth-of-type(2) a:before,
.threeitems .public_card_content li:nth-of-type(3) a:before{
    content: counter(chapter);
    height: 16px;
    width: 16px;
    display: block;
    position: absolute;
    top: 2px;
    left: -22px;
    z-index: 1;
    font-size: 12px;
    line-height: 15px;
    /*background: #6ccddf;*/
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    color: #fff;
    text-align: center;
}
.threeitems .public_card_content li:first-child a:after,
.threeitems .public_card_content li:nth-of-type(2) a:after,
.threeitems .public_card_content li:nth-of-type(3) a:after {
    content: "";
    height: 0;
    width: 0;
    border-style: solid;
    border-width: 4px 4px 4px 5px;
    /*border-color: transparent transparent transparent #6ccddf;*/
    display: block;
    position: absolute;
    top: 6px;
    left: -8px;
}
.threeitems .public_card_content li:first-child a:before{
    background: #ff3032;
}
.threeitems .public_card_content li:nth-of-type(2) a:before{
    background: #ff9776;
}
.threeitems .public_card_content li:nth-of-type(3) a:before{
    background: #ffba66;
}
.threeitems .public_card_content li:first-child a:after{
    border-color: transparent transparent transparent #ff3032;
}
.threeitems .public_card_content li:nth-of-type(2) a:after{
    border-color: transparent transparent transparent #ff9776;
}
.threeitems .public_card_content li:nth-of-type(3) a:after{
    border-color: transparent transparent transparent #ffba66;
}
</style>